<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    BFC   Block Formatting Contexts         块级元素格式化上下文
            它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互作用；


            块级元素：父级（是一个快元素）
            内容：子元素（是一个快元素）
            其他元素：与内容同级别的兄弟元素
            相互作用：指的是BFC里的元素与外面的元素不会发生影响；


    触发BFC的方式（以下任意一条就可以）：
                1、float的值不为none；
                2、overflow的值不为visiable；
                3、dispaly的值为table-cell，table-aption 和inlien-block之一；
                4、position的值不为static或releative中的任何一个；
    普通文档流的布局规则：
                1、浮动的元素是不会被父级计算高度；
                2、非浮动元素会覆盖浮动元素的位置；
                3、margin会传递给父级；
                4、两个相邻的元素上下margin会重叠；
    BFC的布局规则：
                1、浮动的元素是会被父级计算高度（父级触发了BFC）；
                2、非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC）；
                3、margin会传递给父级(父级触发了BFC)；
                4、两个相邻的元素上下margin不会重叠（给其中一个元素添加一个单独的父级，然后让这个父级触发BFC）；

-->
<!--1、浮动的元素是会被父级计算高度（父级触发了BFC）；-->
<div style="border: 1px solid #ff0000;display: inline-block">
    <div style="width: 100px;height: 100px;background: green;float: left"></div>
</div>
<!--2、非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC）；-->
<div style="border: 1px solid #ff0000;margin-top: 100px">
    <div style="width: 100px;height: 100px;background: green;float: left">lang1</div>
    <div style="width: 100px;height: 100px;background: red; overflow: hidden">lang2</div>
</div>
<!--3、margin会传递给父级(父级触发了BFC)；-->
<div style="background: blue;overflow: hidden">
    <div style="width: 100px;height: 100px;background: green;margin-top: 100px">lang1</div>
    <div style="width: 100px;height: 100px;background: red; ">lang2</div>
</div>
<!-- 4、两个相邻的元素上下margin不会重叠（给其中一个元素添加一个单独的父级，然后让这个父级触发BFC）；-->
<div style="overflow: hidden">
    <div style="width: 100px;height: 100px;background: green;margin: 100px 0">lang1</div>
    <div style="overflow: hidden">
        <div style="width: 100px;height: 100px;background: red;margin: 100px 0 ">lang2</div>
    </div>
</div>
</body>
</html>